        <script type="text/javascript">

            var scroll1, scroll2, scroll3;
            function loaded() {
                scroll3 = new iScroll('scrollableframe',
                                      { useTransition:false,
                                        checkDOMChanges: true,
                                        hideScrollbar: true,
                                        fixedScrollbar:false,
                                        bounceLock: true }
                                    );
                scroll1 = new iScroll('ricevimento',
                                      { useTransition:false,
                                        checkDOMChanges: true,
                                        hideScrollbar: true,
                                        fixedScrollbar:false,
                                        onBeforeScrollStart : function(e) { e.stopPropagation();} } /*per evitare che scrollando un elemento
                                                                                                     figlio si scrolli anche il padre*/
                                    );
                scroll2 = new iScroll('corsi',
                                      { useTransition:false,
                                        checkDOMChanges: true,
                                        hideScrollbar: true,
                                        fixedScrollbar:false,
                                        onBeforeScrollStart : function(e) { e.stopPropagation();} } /*per evitare che scrollando un elemento
                                                                                                     figlio si scrolli anche il padre*/
                                    );
            }

            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', loaded, false);
            // document.addEventListener('resize', scroll3.refresh, false); 

        </script>
        <nav>
            <ul>
                <li><a href="#explore"><img src="resources\img\explore.png"></a></li>
                <li><a href="#plan"><img src="resources\img\plan.png"></a></li>
                <li><a href="#personal"><img src="resources\img\personal.png"></a></li>
                <li><a href="#events"><img src="resources\img\events.png"></a></li>
                <li><a href="#updates"><img src="resources\img\updates.png"></a></li>
            </ul>
        </nav>
        <header>Teacher Name</header>
<div id="scrollableframe">
    <div class="scroller">
        <div class="frame">
            <div class="badge">
                <img class="picture" src="img/teacher.png">
                <ul>
                    <li class="university">Universita' degli Studi dell'Aquila</li>
                    <li class="faculty">Scienze mm.ff.nn.</li>
                    <li class="identif_num"><span class="label">Matricola:</span> 098765</li>
                    <li class="role">Professore</li>
                </ul>
            </div>
            
            <br>

            <section class="ac-container">
                <div>
                    <input id="ac-1" name="accordion-1" type="checkbox" />
                    <div>
                        <label for="ac-1">Orario ricevimento</label>
                        <article>
                            <div id="ricevimento">
                                <div class="scroller">
                                    <ul>
                                        <li>Martedi'</li>
                                        <li>15.00 - 17.00</li>
                                        <li>Ufficio docente</li>
                                    </ul>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
                <div>
                    <input id="ac-2" name="accordion-1" type="checkbox" />
                    <div>
                        <label for="ac-2">Corsi tenuti</label>
                        <article>
                            <div id="corsi">
                                <div class="scroller">
                                    <ul>
                                        <li>Biologia molecolare</li>
                                        <li>Adattamenti all'ambiente</li>
                                        <li>Ecologia</li>
                                        <li>Cellule e geni</li>
                                        <li>Biologia molecolare</li>
                                        <li>Adattamenti all'ambiente</li>
                                        <li>Ecologia</li>
                                        <li>Cellule e geni</li>
                                    </ul>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </section>


        </div>
        <div class="centercontent">
            <a href="#explore" class="button">
                <span class="icon appointment"></span>
                <span class="label">Prendi appuntamento</span></a>
        </div>

    </div>
</div>
</body>
</html>